<script>
import BookApi from "../../api/book";
import BookReviewForm from "../../components/review/BookReviewForm.vue";
import BookReviewList from "../../components/review/BookReviewList.vue";

export default {
  components: {
    BookReviewForm,
    BookReviewList
  },
  data() {
    return {
      book: {},
      reviewListKey: 0
    };
  },
  methods: {
    async getBook(bookId) {
      try {
        const api = new BookApi();
        let res = await api.find(bookId);
        this.book = res.data;
        //保存在sessionStorage存储book信息，可以在2个组件中传递数据
        sessionStorage.setItem(`book-${this.book.id}`, JSON.stringify(this.book));
        console.log(this.book);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async delBook(bookId) {
      try {
        const api = new BookApi();
        let res = await api.delete(bookId);
        if (res.code === 204) {
          this.$myMessageBox(res.msg);
          this.$router.replace({ name: "book-list" });
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    refreshBookReviewList(){
      this.reviewListKey +=1;
    }
  },
  mounted() {
    let bookId = this.$route.params.id;
    this.getBook(bookId);
  },
  computed: {
    bookInfo() {
      let data = {};
      for (const key in this.book) {
        if (Object.hasOwnProperty.call(this.book, key)) {
          if (!this.book[key]) {
            data[key] = "\u3000";
          } else {
            data[key] = this.book[key];
          }
          if (key === "intro") {
            data[key] = this.book[key].replace(/\n/g, "</p><p>");
            data[key] = `<p>${data[key]}</p>`;
          }
        }
      }
      return data;
    }
  }
};
</script>

<template>
  <div class="book-detail w80">
    <div class="header">
      <h2>{{ bookInfo.title }}</h2>
      <p>
        <!-- <a class="button" href="javascript:void(0);">编辑</a> -->
        <router-link class="button" :to="'/book/edit/' + bookInfo.id">编辑</router-link>
        <a class="button" href="javascript:void(0);" @click="delBook(bookInfo.id)">删除</a>
        <a class="button" href="javascript:void(0);" @click="goBack">返回</a>
      </p>
    </div>
    <div class="block">
      <img :src="bookInfo.pic" :alt="bookInfo.title" />
      <div class="info">
        <dl>
          <dt>作者:</dt>
          <dd>{{ bookInfo.author }}</dd>
        </dl>
        <dl>
          <dt>出版社:</dt>
          <dd>{{ bookInfo.publisher }}</dd>
        </dl>
        <dl>
          <dt>出品方:</dt>
          <dd>{{ bookInfo.producer }}</dd>
        </dl>
        <dl>
          <dt>副标题:</dt>
          <dd>{{ bookInfo.subtitle }}</dd>
        </dl>
        <dl>
          <dt>原作名:</dt>
          <dd>{{ bookInfo.originalTitle }}</dd>
        </dl>
        <dl>
          <dt>译者:</dt>
          <dd>{{ bookInfo.translator }}</dd>
        </dl>
        <dl>
          <dt>出版年:</dt>
          <dd>{{ bookInfo.pubdate }}</dd>
        </dl>
        <dl>
          <dt>页数:</dt>
          <dd>{{ bookInfo.pages }}</dd>
        </dl>
        <dl>
          <dt>定价:</dt>
          <dd>{{ bookInfo.price }}</dd>
        </dl>
        <dl>
          <dt>装帧:</dt>
          <dd>{{ bookInfo.binding }}</dd>
        </dl>
        <dl>
          <dt>丛书:</dt>
          <dd>{{ bookInfo.series }}</dd>
        </dl>
        <dl>
          <dt>ISBN:</dt>
          <dd>{{ bookInfo.isbn }}</dd>
        </dl>
      </div>
    </div>
    <div class="intro"><span v-html="bookInfo.intro"></span></div>
    <div class="review">
      <book-review-form :book-id="book.id" @refresh="refreshBookReviewList" />
      <book-review-list :book-id="book.id" :key="reviewListKey" />
    </div>
  </div>
</template>

<style scoped>
.block {
  display: flex;
  margin-top: 16px;
}

.block img {
  height: 200px;
  width: 140px;
  margin-right: 16px;
}

.block info {
  flex: auto;
}

.block dl {
  margin: 4px auto;
  display: flex;
  justify-content: flex-start;
}

.block dd {
  margin-left: 10px;
}

.intro {
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed blue;
}

.review {
  margin: 8px auto;
  width: 90%;
}
</style>
